<template>
<Card :bordered="false" dis-hover>
    <Button type="primary" class="ivu-mb-16" @click="openedit(-1)" v-hasC="{name: '-v1-rbac-menu-create',flag: '/v1/rbac/menu/create'}">新增</Button>
	<JG-table :params="params" :total="total" :loading="loading" :columns="columns" :data="data" :butshow="butshow" @askData="askData" @handleEdit="openedit"  @sortchange="sortchange" />
    <Modal
        v-model="showCreate"
        :title="edit? '新增' : '编辑'"
        :mask-closable="false"
        :loading="true"
        @on-cancel="handleCancel"
    >
      <Form
				ref="create"
				:model="createMenuData"
				:rules="createRules"
				:label-width="100"
        >
			<FormItem label="菜单名称：" prop="name">
				<Input
					v-model="createMenuData.name"
					placeholder="请输入菜单名称"
					clearable
				/>
			</FormItem>
			<FormItem
				label="所属模块："
				prop="module_id"
			>
				<TreeSelect v-if="datasshow"
					v-model="createMenuData.module_id"
					:data="modulelist"
					@on-change="changemodule"
					v-width="200"
					clearable
				/>
			</FormItem>
			<!-- 编辑不可选自己做父级，disabled框架样式不显示 -->
		 <!-- <FormItem
				label="父菜单名称："
				prop="parent_menu_id"
				v-if="
					createMenuData.module_id !== '' &&
						parentMenuLists &&
					parentMenuLists.length > 0
				"
			>
				<TreeSelect
					v-model="createMenuData.parent_menu_id"
					:data="parentMenuLists"
					v-width="200"
					clearable
				/>
			</FormItem> -->
			<FormItem label="菜单链接：" prop="url">
				<Input
					v-model="createMenuData.url"
					placeholder="请输入菜单链接"
					clearable
				/>
			</FormItem>
			<FormItem label="菜单Icon：" prop="class_style">
				<Input
					v-model="createMenuData.class_style"
					placeholder="请输入Icon类名"
					clearable
				/>
			</FormItem>
			<FormItem label="排序：" prop="sort">
				<Input v-model="createMenuData.sort" placeholder="请输入排序大小" />
			</FormItem>
			<FormItem label="菜单状态：">
				<Switch v-model="createMenuData.status" size="large">
					<span slot="open">开启</span>
					<span slot="close">关闭</span>
				</Switch>
			</FormItem>
	    </Form>
		<div slot="footer">
			<Button type="default" @click="handleCancel">取消</Button>
			<Button @click="handleSubmit" type="primary">保存</Button>
		</div>
	</Modal>
</Card>
</template>

<script>
    import { rbacmenulist, rbacmenuinfo, rbacmenucreate, rbacmenuupdate, rbacmenuupdatestatus } from '@/api/power.js';
    import mixins from '@/mixins/mixins';
    export default {
        name: 'rbac-menu',
        mixins: [mixins],
        data () {
            return {
                butshow: {
                    edit: {
                        name: '-v1-rbac-menu-update',
                        flag: '/v1/rbac/menu/update'
                    }
                },
                columns: [
                    { title: '菜单名称', tree: true, key: 'name', minWidth: 160 },
                    { title: '所属模块', key: 'module_name', minWidth: 160, sortable: 'custom' },
                    { title: '菜单Icon', key: 'class_style', minWidth: 160 },
                    { title: 'url路径', key: 'url', minWidth: 240 },
                    { title: '排序', key: 'sort', width: 80 },
                    { title: '状态', slot: 'status', width: 100 },
                    { title: '创建时间', key: 'created_at_str', width: 200 },
                    { title: '操作', slot: 'projectsettingAction', align: 'center', width: 80, fixed: 'right' }
                ],
                data: [],
                funaskData: [],
                datas: [],
                parentData: {},
                modulelist: [],
                datasshow: true,
                edit: true,
                params: { sort_module: '', page: 1, pageSize: 10 },
                parentMenuList: {},
                parentMenuLists: [],
                showCreate: false,
                createMenuData: {
                    name: '',
                    url: '',
                    module_id: '',
                    parent_menu_id: '',
                    class_style: '',
                    status: true,
                    sort: ''
                },
                createRules: {
                    name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
                    url: [{ required: true, message: '请输入菜单连接', trigger: 'blur' }],
                    class_style: [
                        { required: true, message: '请输入菜单Icon', trigger: 'blur' }
                    ],
                    sort: [
                        {
                            message: '排序必须是正数',
                            pattern: /^[+]{0,1}(\d+)$/,
                            trigger: 'blur'
                        }
                    ],
                    module_id: [{ required: true, message: '请选择模块', trigger: 'blur' }],
                    status: [
                        { required: true, message: '请输入菜单状态', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            initial () {
                this.funaskData = rbacmenulist
                this.askData()
            },
            askDatas (res) {
                this.data = res.list
                this.total = res.total;
            },
            sortchange (e) {
                if (e.key === 'module_name') {
                    this.params.sort_module = e.sort
                }
                this.initial()
            },
            openedit (row) {
                if (row === -1) {
                    this.createMenuData = {
                        name: '',
                        url: '',
                        module_id: '',
                        parent_menu_id: '',
                        class_style: '',
                        status: true,
                        sort: ''
                    }
                    this.getParentMenuList(0);
                    // this.datasshow = false
                    this.edit = true
                } else {
                    this.edit = false
                    this.$nextTick(() => {
                        this.$refs['create'].resetFields();
                        // this.updateIndex = index;
                        // const row = this.list[index];
                        for (let key in this.createMenuData) {
                            this.createMenuData[key] = row[key];
                        }
                        this.createMenuData.status = this.createMenuData.status === '1';
                        this.createMenuData.id = row.id;
                        this.getParentMenuList(row.id, this.createMenuData.module_id);
                        this.changemodule(row.parent_menu_id)
                    });
                    // this.getParentMenuList(row.id, this.createMenuData.module_id);
                    // for (let key in this.createMenuData) {
                    //     this.createMenuData[key] = row[key];
                    // }
                    // this.createMenuData.status = this.createMenuData.status === '1';
                    // this.createMenuData.id = row.id;
                    // this.datas = JSON.parse(JSON.stringify(this.data))
                    // this.datasshow = false
                    // for (let item of this.datas) {
                    //     if (item.children.length > 0) {
                    //         for (let items of item.children) {
                    //             if (this.createMenuData.id == items.value) {
                    //                 items.disabled = true
                    //             }
                    //         }
                    //     }
                    //     if (this.createMenuData.id == item.value) {
                    //         item.disabled = true
                    //     }
                    // }
                    // setTimeout(() => {
                    //     this.datasshow = true
                    // })
                }
                this.showCreate = true
            },
            // 获取父级菜单
            getParentMenuList (moduleId, menu) {
                rbacmenuinfo({ id: moduleId }).then((res) => {
                    this.parentMenuList = res.menu_list;
                    this.modulelist = res.module_list;
                    if (menu) {
                        this.changemodule(menu);
                    }
                });
            },
            // 选择模块促发父级菜单名
            changemodule (e) {
                // for (const key in this.parentMenuList) {
                //     this.parentMenuLists = this.parentMenuList[key];
                // }
                // this.parentMenuList
                this.parentMenuLists = this.parentMenuList[`${e}`];
            },
            handleCancel () {
                this.$refs.create.resetFields();
                this.showCreate = false;
            },
            // 新增数据
            handleSubmit () {
                this.$refs.create.validate((valid) => {
                    if (valid) {
                        let sendData = JSON.parse(JSON.stringify(this.createMenuData));
                        sendData.status = sendData.status === true ? '1' : '0';
                        if (this.edit) {
                            // 新建
                            rbacmenucreate(sendData).then((res) => {
                                // 创建模块成功后，刷新页面
                                this.showCreate = false;
                                this.askData();
                                this.$Message.success('新增成功');
                                this.$refs.create.resetFields();
                            });
                        } else {
                            // 修改
                            rbacmenuupdate(sendData).then((res) => {
                                // 修改模块成功后，刷新页面
                                this.showCreate = false;
                                this.askData();
                                this.$Message.success('编辑成功');
                                this.$refs.create.resetFields();
                            });
                        }
                    }
                });
            }
        }
    };
</script>
<style lang="less" scoped>
.jc {
  width: 6px;
  height: 6px;
  border-radius: 8px;
  margin-right: 8px;
}
.success {
  background-color: #4cce4c;
}
.fail {
  background-color: red;
}
</style>
